<template>
  <div>
    <div class="tital">
      <h2>订单设置</h2>
      <button>刷新</button>
    </div>
    <div class="datalist">
      <div class="datalistTital">
        <div>订单设置</div>
      </div>
    </div>
    <div class="orderset">
      <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm sxbujv">
        <!-- <el-form-item label="年龄" prop="age" :rules="[
            { required: true, message: '年龄不能为空' },
            { type: 'number', message: '年龄必须为数字值' }
          ]">
            <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
          </el-form-item> -->
        <div>
          <span class="spanw"><span class="zhongyao">*</span>正常订单超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;分&nbsp;)</span> <span>未付款，订单自动关闭</span>
        </div>
        <div>
          <span class="spanw"><span class="zhongyao">*</span>付款超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;小时&nbsp;)</span><span>未确认订单，订单自动确认</span>
        </div>
        <div>
          <span class="spanw"><span class="zhongyao">*</span>发货超过超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;天&nbsp;)</span><span>未确认收货，订单自动完成</span>
        </div>
        <div>
          <span class="spanw"><span class="zhongyao">*</span>订单完成超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;天&nbsp;)</span><span>自动关闭，不能申请售后</span>
        </div>
        <div>
          <span class="spanw"><span class="zhongyao">*</span>订单完成超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;天&nbsp;)</span><span>自动五星好评</span>
        </div>
        <div>
          <span class="spanw"><span class="zhongyao">*</span>无备注订单超过</span>
          <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          <span class="danwei">(&nbsp;小时&nbsp;)</span><span>自动确认</span>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OrderSet',
  data() {
    return {
      numberValidateForm: {
        age: ''
      },
      num1: 1
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    submitForm(formName) {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
  },
  mounted() {
  },
}
</script>
<style scoped>
.tital {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
}

.tital button {
  background-color: #1CB09A;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-right: 40px;
}

.tital h2 {
  width: 100px;
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1CB09A;
  padding-left: 10px;
  margin-left: 18px;
}

.datalist {
  width: 95%;
  margin: 30px auto 0px;
  font-size: 14px;
  background-color: #f0f0f0;
}

.datalistTital {
  height: 50px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 18px;

}

.sxbujv {
  width: 100%;
  margin: 0px auto;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sxbujv>div {
  width: 50%;
  margin: 10px auto;
  display: flex;
  justify-content: left;
  align-items: center;
}

.sxbujv>div:last-child {
  margin-top: 20px;
  padding-left: 90px;
  box-sizing: border-box;
}

.sxbujv .spanw {
  width: 140px;
  text-align: right;
}

.sxbujv span {
  margin-right: 20px;
}

.danwei {
  width: 54px;
  margin-left: 20px;
  font-weight: 600;
  display: inline-block;
  /* border: 1px solid #1CB09A; */
}

.zhongyao {
  color: red;
  margin-right: 10px !important;
}

.orderset {
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
</style>
  